<script setup>
import Title from '@/components/title.vue';
import DataStatistics from "../../echart/data-statistics/index.vue"
import energyList from './energy-List.vue';
import powerLine from '../../echart/powerLine.vue';
import runDetail from '../../echart/run-line/runDetail.vue';
</script>

<template>
    <div class="page">
        <div class="top">
            <Title title="舒适度数据统计"></Title>
            <DataStatistics></DataStatistics>
        </div>
        <div class="mida">
            <Title title="能源数据情况"></Title>
            <energyList></energyList>
        </div>
        <div class="midb">
            <Title title="系统能效统计"></Title>
            <powerLine></powerLine>
        </div>
        <div class="bottom">
            <Title title="机主运行情况"></Title>
            <div class="total">
                <runDetail></runDetail>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    margin-left: 20px;
    font-size: 20rem;

    .top {
        margin-top: 50px;
        margin-bottom: 3%;
        flex: 0 0 20%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        position: relative;
    }

    .mida {
        flex: 0 0 20%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .midb {
        flex: 0 0 30%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    }

    .bottom {
        flex: 0 0 30%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);

        .total {
            height: 100%;
            width: 100%;
        }
    }

    .videoList {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
    }

}
</style>
